<?php
/*
Template Name: Services
*/
?>

<?php get_header(); ?>


<!-- Map Header -->
<div class="page-header">
	<?php the_post_thumbnail( array (687,265) );?>
	<div class="page-header-caption">
	<?php the_title(); ?>
	</div>
</div>

<!-- Sidebar -->
<div class="page-sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Sidebar") ) : ?><?php endif; ?>
 
  <?php if (!empty($sid) && function_exists('is_dynamic_sidebar') && is_active_sidebar($sid)){ ?>
    <div id="sidebar">  
      <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar($sid)): ?><?php endif; ?>
    </div>
  <?php } ?>
</div>

<div class="clear"></div>

<!-- Content Area -->
<div class="page-content">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	<div class="page-content-single">
		<?php the_content(); ?>
	</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>


<div class="single-post-options">
	<?php 

	$tablist = get_field('tabs_or_list_items');

	if($tablist == 'Tabs'){ ?>

<?php
$fields = get_fields(); 
$tabs = $fields['tabs'];
$tabstitle = $tabs;
?>

<ul id="tabs">
	<?php 
	$tabcount = 0;
	foreach ($tabs as $tab) {
		$tabid = $tabcount + 1;
	    echo "<li><a href='#' name='#tab".$tabid."'>".$tabstitle[$tabcount]['title']."</a></li>";
	    $tabcount++;
	}
	?>  
</ul>

	<div id="content">

		<?php if( get_field('items') ):

		while( has_sub_field('items') ): $count++ ?>
	 			

			<div id="tab<?php echo $count ?>">
				<div class="tabs-thumbnail">
					<img src="<?php the_sub_field('thumbnail'); ?>" />
				</div>
				<div class="tabs-content">
					<div class="tabs-content-title">
				    	<?php the_sub_field('title'); ?>
					</div>
					<div class="tabs-content-text">
				    	<?php the_sub_field('text'); ?>
					</div>
				</div>
			</div>

	 
		<?php endwhile; ?>
	 
		<?php endif; ?>

	</div>

 <script>
    function resetTabs(){
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id",""); //Reset id's      
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

    (function(){
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:first a").attr("id","current"); // Activate first tab
        $("#content > div:first").fadeIn(); // Show first tab content
        
        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content        
          }
        }
    })()
  </script>

<?php } else { ?>

<div class="list-wrapper">
<h1>Information</h1>

<?php $c = 0; ?>
<?php if( get_field('items') ):

	while( has_sub_field('items') ): ?>
			
			<div class="tab-list-wrapper <?php echo ((++$c % 2 === 0) ? 'odd' : 'even'); ?>">
				<div class="tabs-list-thumbnail">
					<img src="<?php the_sub_field('thumbnail'); ?>" />
				</div>
				<div class="tabs-list-content">
					<div class="tabs-list-content-title">
				    	<?php the_sub_field('title'); ?>
					</div>
			    	<div class="tabs-list-content-text">
			    		<?php the_sub_field('text'); ?>
			    	</div>
				</div>
			</div>
			<div class="clear"></div>

 
	<?php endwhile; ?>
 
<?php endif; ?>

</div>

<?php } ?>


</div>

</div>


<div class="clear"></div>

<?php get_footer(); ?>